<template>
	<div>
		<Tabs :value="params.order_type" @on-click="handleChangeTab">
	        <TabPane name="0" label="全部订单"></TabPane>
	        <TabPane name="1" label="待付款"></TabPane>
	        <TabPane name="2" label="待确认"></TabPane>
	        <TabPane name="4" label="待发货"></TabPane>
	        <TabPane name="6" label="已发货"></TabPane>
	        <TabPane name="8" label="已完成"></TabPane>
	        <TabPane name="9" label="已取消"></TabPane>
	        <TabPane name="10" label="已回收"></TabPane>
	    </Tabs>
	    <SuperTable
	    	ref="table"
	    	path="API_ORDER_LISTS"
	    	:columns="columns"
	    	:params="params"
	    	:loading="false"
	    	@on-loaded="switchLoading = false"
	    	@on-selection-change="handleChangeSelection"
	    >
	    	<div slot="header-left">
	    		<Button type="primary" icon="ios-download-outline">导出筛选数据</Button>
	    		<RadioGroup type="button" style="margin-left: 10px;">
			        <Radio label="线上订单"></Radio>
			        <Radio label="线下订单">
			        	<span>线下订单</span>
			        	<Tooltip content="Right Center text" placement="bottom">
			                <Icon type="md-help-circle" :size="14" color="#485865" />
			                <div slot="content">所有自提订单均算为线下订单</div>
			            </Tooltip>
			        </Radio>
			    </RadioGroup>
	    	</div>
	    	
	    	<Form slot="header-right" :mode="filterForm" inline @submit.native.prevent>
	    		<FormItem label="按配送">
	    			<Select style="width: 100px">
				        <Option value="beijing">普通快递</Option>
				        <Option value="shenzhen">同城配送</Option>
				        <Option value="shenzhen">自提</Option>
				    </Select>
	    		</FormItem>
	    		<FormItem label="按渠道">
	    			<Select style="width: 100px">
				        <Option value="beijing">线上订单</Option>
				        <Option value="shenzhen">门店订单</Option>
				    </Select>
	    		</FormItem>
	    		<FormItem label="按时间">
	    			<DatePicker type="datetimerange" format="yyyy-MM-dd" style="width: 190px"></DatePicker>
	    		</FormItem>
                <FormItem label="关键词">
                    <Input v-model="filterForm.keywords" placeholder="请输入关键词搜索" suffix="ios-search" clearable style="width: 220px"></Input>
                </FormItem>
                <Button type="primary" @click="handleSearch">筛选</Button>
	    	</Form>
	    	
	    	<div slot="page-left">
	    		<Button v-if="params.order_type == '9'" @click="handleBatchDelete">删除</Button>
	    	</div>
	    	
	    	<div class="ui-table-cell" slot-scope="{ row }" slot="order">
	            <p class="ui-table-cell-line">订单号：{{ row.order_sn }}</p>
	            <p class="ui-table-cell-line">订单状态：{{ row.status_text }}</p>
	        </div>
	        <div class="ui-table-cell" slot-scope="{ row }" slot="contact">
	            <p class="ui-table-cell-line">收货人：{{ row.address_name }}</p>
	            <p class="ui-table-cell-line">手机号：{{ row.address_mobile }}</p>
	        </div>
	        <div class="ui-table-cell" slot-scope="{ row }" slot="address">
	        	<PoptipCells title="金额&地址" :value='[`金额：<span class="ui-text-error">${row.real_price}</span>`, `地址：${row.address_detail}`]'>
	        		<p class="ui-table-cell-line ui-ellipsis">金额：<ui-price class="ui-text-error">{{ row.real_price }}</ui-price></p>
	            	<p class="ui-table-cell-line ui-ellipsis">地址：{{ row.address_detail }}</p>
	        	</PoptipCells>
	        </div>
	        <div class="ui-table-cell" slot-scope="{ row }" slot="time">
	            <p class="ui-table-cell-line">下单时间：{{ row.create_time }}</p>
	            <p class="ui-table-cell-line">付款时间：{{ handleGetTime(row.pay_time) }}</p>
	        </div>
	        <div class="ui-table-cell" slot-scope="{ row }" slot="data">
	            <p class="ui-table-cell-line">渠道：{{ row.type_text }}</p>
	            <p class="ui-table-cell-line">配送：{{ row.address_type_text }}</p>
	        </div>
	        <template slot-scope="{ row, index }" slot="action">
	        	<Button type="primary" size="small" @click="handleGoDetail(row.sub_sn)">查看</Button>
	        	<!--<template v-if="row.status == -1">
	        		<Poptip title="是否确认删除此订单？" :width="190" placement="left" confirm transfer @on-ok="handleDelete(row.sub_sn)">
		        		<Button type="error" size="small">删除</Button>
		        	</Poptip>
	        	</template>
	        	<Button v-if="row.status > 0 && row.status < 6" size="small" @click="handleCancelOrder(row.sub_sn)">取消订单</Button>-->
	        </template>
	    </SuperTable>
	    
	    <DrawerForm v-model="showCancelModal" title="取消订单" :mask-closable="false">
	    	<div style="margin-bottom: 15px;">
	    		订单号：{{ cancelForm.sub_sn }}
	    	</div>
	    	<Input type="textarea" v-model="cancelForm.reason" :rows="5" placeholder="请输入取消原因" />
	    	<div slot="footer">
	    		<Button @click="showCancelModal = false">取消</Button>
            	<Button type="primary" :loading="cancelCommiting" style="margin-left: 8px" @click="handleSubmitCancel">确认</Button>
	    	</div>
	    </DrawerForm>
	    
	    <LoadingMask v-if="switchLoading"></LoadingMask>
	</div>
</template>

<script>
import Util from '@/libs/util.js';
import Tools from '@/libs/tools.js';
import SuperTable from '@/components/SuperTable.vue';
import LoadingMask from '@/components/LoadingMask.vue';
import PoptipCells from '@/components/PoptipCells.vue';
import DrawerForm from '@/components/DrawerForm.vue';
export default {
	name: 'goodsList',
	components: {
		SuperTable,
		PoptipCells,
		LoadingMask,
		DrawerForm
	},
	data() {
		return {
			switchLoading: false,
			showCancelModal: false,
			cancelCommiting: false,
			ids: [],
			filterForm: {
				keywords: '',
				brand_id: undefined,
				catid: []
			},
			params: {
				order_type: 0,
				page: 1,
				limit: 10,
				attrs: ['sku_info']
			},
			columns: [
                {
                    title: '订单信息',
                    slot: 'order',
                    minWidth: 248
                },
                {
                    title: '收货人&联系方式',
                    slot: 'contact',
                    minWidth: 177
                },
                {
                    title: '金额&地址',
                    slot: 'address',
                    minWidth: 177
                },
                {
                    title: '下单时间',
                    slot: 'time',
                    minWidth: 210
                },
                {
                    title: '渠道&配送方式',
                    slot: 'data',
                    minWidth: 170
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 78
                }
			],
			cancelForm: {
				sub_sn: '',
				reason: ''
			}
		}
	},
	mounted() {
		
	},
	methods: {
		// 切换选项卡
		handleChangeTab(name) {
			this.switchLoading = true;
			this.params.order_type = name;
		},
		// 搜索
		handleSearch() {
			let cats = this.filterForm.catid;
			if(cats.length > 0) {
				this.params.catid = cats[cats.length - 1];
			}else{
				this.params.catid = '';
			}
			this.params.brand_id = this.filterForm.brand_id || '';
			this.params.keywords = this.filterForm.keywords;
		},
		// 表格选中触发事件
		handleChangeSelection(selection) {
			this.ids = selection.map(item => {
				return item.sub_sn;
			})
		},
		// 展开、收起拓展功能
		handleShowExpand(index) {
			let row = this.$refs.table.data[index]
			if(row._expanded == undefined) {
				this.$set(row, '_expanded', true);
			}else{
				row._expanded = !row._expanded;
			}
		},
		// 取消订单
		handleCancelOrder(sn) {
			this.cancelForm.sub_sn = sn;
			this.showCancelModal = true;
			this.cancelForm.reason = '';
		},
		// 确认取消订单
		handleSubmitCancel() {
			if(this.cancelCommiting) return false;
			if(!this.cancelForm.reason) {
				this.$Message.error('请输入取消原因');
				return false;
			}
			let params = {
				sub_sn: this.cancelForm.sub_sn,
				reason: this.cancelForm.reason
			}
			this.cancelCommiting = true;
			Util.ajax.post(this.API['API_ORDER_CANCEL'], params).then((res) => {
				this.cancelCommiting = false;
				this.showCancelModal = false;
				this.$Message.success('取消成功');
				// 更新该行数据
				this.$refs.table.data = this.$refs.table.data.map(item => {
					if(item.sub_sn == params.sub_sn) {
						item.status = res.status;
						item.status_text = res.status_text;
						item.cancel_reason = res.cancel_reason;
					}
					return item;
				})
				// 清除取消订单的表单
				this.cancelForm.sub_sn = '';
				this.cancelForm.reason = '';
			}).catch(() => {
				this.cancelCommiting = false;
			})
		},
		// 删除订单
		handleDelete(sn) {
			Util.ajax.post(this.API['API_ORDER_DELETE'], {sub_sn: sn}).then((res) => {
				this.$Message.success('删除成功');
				this.$refs.table.init();
			}).catch(() => {
				
			})
		},
		// 批量删除订单
		handleBatchDelete() {
			if(this.ids.length == 0) {
				this.$Message.error('请至少选择一个订单');
				return false;
			}
			this.$Modal.confirm({
                title: '操作提示',
                content: '<p>是否确认删除所选的订单？</p>',
                onOk: () => {
                    Util.ajax.post(this.API['API_ORDER_BATCH_DELETE'], {sub_sns: this.ids}).then((res) => {
						this.$Message.success('删除成功');
						this.$refs.table.init();
					}).catch(() => {
						
					})
                }
            });
		},
		handleGetTime(time) {
			if(!time) return '--';
			return Tools.formatDate(time * 1000, 'yyyy-MM-dd hh:mm:ss');
		},
		// 跳转详情
		handleGoDetail(sn) {
			this.$router.push({name: 'order_retail_order_detail', query: {sn: sn}});
		}
	}
}
</script>